<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form isheader" v-show="headerShow">
        <a-form size="small" :model="query" layout="inline">
          <a-form-item label="客户" prop="customName">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.customName"/>
          </a-form-item>
          <a-form-item label="织布单号" prop="planOrderCode">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.planOrderCode"/>
          </a-form-item>
          <a-form-item label="坯布编号" prop="greyCode">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.greyCode"/>
          </a-form-item>
          <a-form-item v-if="activeNme == '1'" label="布笼" prop="outShelveName">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.outShelveName"/>
          </a-form-item>
          <a-form-item v-if="activeNme == '4'" label="布笼" prop="inShelveName">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.inShelveName"/>
          </a-form-item>
          <!-- 差字段 -->
          <a-form-item v-if="activeNme == '3' || activeNme == '1'" label="条形码" prop="clothfiyCode">
            <a-input allow-clear :style="{ width: '180px' }" class="bacClass" v-model="query.clothfiyCode"/>
          </a-form-item>
          <a-form-item v-if="activeNme == '2'" label="客户订单号" label-width="90px" prop="customOrderNo">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.customOrderNo"/>
          </a-form-item>
          <CorporateSectorCascader v-if="activeNme == '1' || activeNme == '2'" ref="cascaderRef"
                                   :configCascader="configCascader2" @changeCascader="changeCascader2"/>

          <a-form-item label="仓库" v-if="activeNme == '1' || activeNme == '2'" label-col-flex="65px">
            <a-select popup-container="html" class="bacClass" :style="{ width: '230px' }" v-model="query.warehouseId"
                      :disabled="query.companyId == ''" allow-clear>
              <a-option v-for="item in pageData.inShelveList2" :key="item.id" :value="item.id">
                {{ item.warehouseName }}
              </a-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
      <div class="my-tool-bar" style="margin-bottom: 5px">
        <a-space>
          <el-button @click="getList" type="primary" :icon="Search">查询</el-button>
          <el-button v-if="activeNme == '1'" plain @click="splitAdjustment('split')">拆分</el-button>
          <el-button v-if="activeNme == '1'" plain @click="splitAdjustment('Adjustment')">调整</el-button>
          <el-button v-if="activeNme == '2'" :icon="Download" plain
                     @click="EXELTABLE(tableColumns1, pageData.dataList, '毛坯仓库存明细')">导出
          </el-button>
          <el-button v-if="activeNme == '3'" :icon="Printer" plain>条码打印</el-button>
        </a-space>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18"/>
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18"/>
        </a-divider>
      </div>
    </template>
    <template #pageTabel>
      <a-tabs   :lazy-load="true" type="card" @change="activeChange" justify :default-active-key="activeNme"
              style="height:100%">
        <a-tab-pane title="明细" key="1">
          <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                           v-loading="loadingElplus" rowSelection="multiple"
                           @grid-ready="gridReady" style="height: calc(100% - 45px)" :defaultColDef="defaultColDef"
                           class="ag-theme-alpine"
                           :rowData="pageData.dataList" :columnDefs="tableColumns"
                           :localeText="localeText1"></AgGridVuesCopys>
          <paginationCopys :total="pageData.total" show-total show-jumper show-page-size @change="PageSize"
                           @page-size-change="changeSize" style="justify-content: center" :page-size="query.size"
                           :current="query.page" :page-size-options="pagingList1"/>
        </a-tab-pane>
        <a-tab-pane title="汇总" key="2">
          <!-- <encapsulation-agrid :configaggrid="configaggrid"></encapsulation-agrid> -->
          <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                           v-loading="loadingElplus" rowSelection="multiple"
                           @grid-ready="gridReady1" style="height: calc(100% - 45px)" :defaultColDef="defaultColDef"
                           class="ag-theme-alpine"
                           :rowData="pageData.dataList" :columnDefs="tableColumns1"
                           :localeText="localeText1"></AgGridVuesCopys>
          <paginationCopys :total="pageData.total" show-total show-jumper show-page-size @change="PageSize"
                           @page-size-change="changeSize" style="justify-content: center" :page-size="query.size"
                           :current="query.page" :page-size-options="pagingList1"/>
        </a-tab-pane>
        <!-- <a-tab-pane title="拆分明细" key="3">
              <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" v-loading="loadingElplus" rowSelection="multiple" @grid-ready="gridReady2"
                style="height: 90%" :defaultColDef="defaultColDef" class="ag-theme-alpine"
                :rowData="pageData.dataList" :columnDefs="tableColumns" :localeText="localeText1"></AgGridVuesCopys>
            <paginationCopys :total="pageData.total" show-total show-jumper show-page-size @change="PageSize"
                @page-size-change="changeSize" style="justify-content: center" :page-size="query.size"
                :current="query.page" :page-size-options="pagingList1" />
        </a-tab-pane> -->
        <a-tab-pane title="调整记录" key="4">
          <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                           v-loading="loadingElplus" rowSelection="multiple"
                           @grid-ready="gridReady3" style="height: calc(100% - 45px)" :defaultColDef="defaultColDef"
                           class="ag-theme-alpine"
                           :rowData="pageData.dataList" :columnDefs="tableColumns2"
                           :localeText="localeText1"></AgGridVuesCopys>
          <paginationCopys :total="pageData.total" show-total show-jumper show-page-size @change="PageSize"
                           @page-size-change="changeSize" style="justify-content: center" :page-size="query.size"
                           :current="query.page" :page-size-options="pagingList1"/>
        </a-tab-pane>
      </a-tabs>
    </template>
    <el-dialog style="width: 500px" v-model="pageData.dialogFormVisible"
               :title="pageData.pageType == 'split' ? '拆分' : '调整'" v-loading="loadingElplus1">
      <el-form :model="form">
        <el-form-item v-if="pageData.pageType == 'split'" label="条形码:" label-width="80px">
          <span>{{ form.clothfiyCode }}</span>
        </el-form-item>
        <el-form-item v-if="pageData.pageType == 'split'" label="原重:" label-width="80px">
          <span>{{ form.formerWeight }}</span>
        </el-form-item>
        <el-form-item v-if="pageData.pageType == 'split'" label="拆分重量:" label-width="80px">
          <el-input v-model="form.splitWeight"/>
        </el-form-item>
        <el-form-item v-if="pageData.pageType == 'Adjustment'" label="匹号:" label-width="70px">
          <span>{{ form.horseNo }}</span>
        </el-form-item>
        <el-form-item v-if="pageData.pageType == 'Adjustment'" label="原托盘编号:" label-width="110px">
          <span>{{ form.outShelveCode }}</span>
        </el-form-item>
        <el-form-item v-if="pageData.pageType == 'Adjustment'" label="原区域:" label-width="80px">
          <span>{{ form.areaName }}</span>
        </el-form-item>
        <el-form-item v-if="pageData.pageType == 'Adjustment'" label="原库位:" label-width="80px">
          <span>{{ form.storageName }}</span>
        </el-form-item>
        <el-form-item v-if="pageData.pageType == 'Adjustment'" label="调整托盘编号:" label-width="120px">
          <el-select v-model="form.inShelveId" @focus="focusShelve" filterable placeholder="选择调整托盘编号">
            <el-option v-for="item in pageData.inShelveList" :key="item.id" :label="item.shelveCode"
                       :value="item.id" :loading="pageData.loading"/>
          </el-select>
        </el-form-item>
        <el-form-item v-if="pageData.pageType == 'Adjustment'" label="调整区域:" label-width="92px">
          <span>{{ form.areaName1 }}</span>
        </el-form-item>
        <el-form-item v-if="pageData.pageType == 'Adjustment'" label="调整库位:" label-width="93px">
          <el-select v-model="form.inStorageId" @focus="focusShelve1" filterable placeholder="选择调整库位"
                     @change="changeNo1(form.inStorageId)">
            <el-option v-for="item in pageData.inShelveList3" :key="item.id" :label="item.storageName"
                       :value="item.id" :loading="pageData.loading"/>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="pageData.dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="save"> 确认 </el-button>
                </span>
      </template>
    </el-dialog>
  </pageTabelLayout>
</template>

<script lang="ts" setup>
//表格


//表格数据处理
import {localeText} from '@/api/aggridZw'

//分页列表
import {pagingList} from '@/api/paging'

// 引入element提示

import {ElMessage} from 'element-plus'

//引入封装post
import {post} from '@/api/http'
import {tableColumns, tableColumns1, tableColumns2} from '../index'

//引入导出方法
import {EXPORTEXEL, EXELTABLE} from '@/utils/exportEXCEL'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
import {Search, Download, Printer} from '@element-plus/icons-vue'

interface Pagein {
  btnList: any
  dataList: any
  dialogFormVisible: boolean
  pageType: string
  inShelveList: any
  loading: boolean
  total: any
  inShelveList2: any
  inShelveList3: any
  inShelveList4: any
}

const headerShow = ref(true)

// 跟请求参数无关的放这里
let pageData = reactive<Pagein>({
  btnList: ['查询', '导出'], // 按钮列表
  dataList: [],
  dialogFormVisible: false,
  pageType: '',
  inShelveList: [],
  loading: false,
  total: 0,
  inShelveList2: [],
  inShelveList3: [],
  inShelveList4: [],
})

interface Querin {
  page: any
  size: any
  clothfiyCode: Number | String
  customOrderNo: Number | String
  greyCode: Number | String
  customName: Number | String
  planOrderCode: Number | String
  outShelveName: Number | String
  inShelveName: Number | String
  companyId: Number | String
  warehouseId: Number | String
  // warehouseTypeName: String
}

//getlist初始化接口参数
let query = reactive<Querin>({
  page: 1,
  size: 10,
  customName: '',
  clothfiyCode: '',
  customOrderNo: '',
  outShelveName: '',
  inShelveName: '',
  planOrderCode: '',
  greyCode: '',
  companyId: '',
  warehouseId: '',
  // warehouseTypeName: '坯布仓',
})

// 分页数组条数
const pagingList1: any = ref(pagingList)

//tabs选中的值
let activeNme = ref<string>('1')

// 表格准备事件
const gridOption = ref()
const gridOption1 = ref()
const gridOption2 = ref()
const gridOption3 = ref()
const gridReady = (params: any) => {
  gridOption.value = params.api
}
const gridReady1 = (params: any) => {
  gridOption1.value = params.api
}
const gridReady2 = (params: any) => {
  gridOption2.value = params.api
}
const gridReady3 = (params: any) => {
  gridOption3.value = params.api
}
//表格配置
const defaultColDef = {
  sortable: true,
  resizable: true,
  filter: true,
  //flex: 1
}

const localeText1: any = ref(localeText)

// 分页事件
const PageSize = (val: any) => {
  query.page = val
  getList()
}

const changeSize = (val: any) => {
  query.size = val
  getList()
}
// loding.....
let loadingElplus = ref<boolean>(false)
let loadingElplus1 = ref<boolean>(false)
let cascaderRef = ref('')

const activeChange = (val: any) => {
  pageData.total = 0
  query.page = 1
  query.size = 10
  query.customName = ''
  query.clothfiyCode = ''
  query.customOrderNo = ''
  query.outShelveName = ''
  query.inShelveName = ''
  query.planOrderCode = ''
  query.greyCode = ''
  query.companyId = ''
  query.warehouseId = ''
  activeNme.value = val
  let data = {
    sectorId: '',
    sectorLabel: '',
    corporateId: '',
    corporateLabel: '',
  }
  cascaderRef.value?.parentComponent(data)
  getList()
}
let form = ref<any>({
  id: '',
  formerWeight: '',
  areaName1: '',
})
const focusShelve = async () => {
  try {
    pageData.loading = true
    let {code, data, message} = await post({
      url: 'dwWms/shelve/getFieldValue',
      data: {warehouseId: form.value.warehouseId, shelveCode: ''},
    })
    if (code == 200) {
      pageData.inShelveList = data
      pageData.loading = false

      return
    }
    ElMessage.error(message)
  } finally {
    pageData.loading = false
  }
}
const focusShelve1 = async () => {
  try {
    pageData.loading = true
    let {code, data, message} = await post({
      url: '/dwWms/Storage/getFieldValue',
      data: {warehouseId: form.value.warehouseId, storageName: ''},
    })
    if (code == 200) {
      pageData.inShelveList3 = data
      pageData.loading = false
      return
    }
    ElMessage.error(message)
  } finally {
    pageData.loading = false
  }
}
const changeNo1 = async (resss: any) => {
  // console.log(form.inStorageId, resss, '我在这儿等着你回来');

  try {
    pageData.loading = true
    let {code, data, message} = await post({
      url: '/dwWms/Storage/getStorageByPara',
      data: {id: resss},
    })
    if (code == 200) {
      form.value.areaName1 = data[0].areaName
      form.value.inAreaId = data[0].areaId
      // pageData.inShelveList4 = data
      pageData.loading = false
      // console.log(form.areaName1, '你转身一走苏州里的不是我');

      return
    }
    ElMessage.error(message)
  } finally {
    pageData.loading = false
  }
}
const splitAdjustment = (type: string) => {
  let selsetionList = gridOption.value.getSelectedRows()
  if (selsetionList.length == 0) {
    ElMessage.warning('请选择您的单据')
    return
  }
  if (type == 'split') {
    form.value = {}
    form.value.formerWeight = selsetionList[0].weight
    form.value.clothfiyCode = selsetionList[0].clothfiyCode
    form.value.splitWeight = ''
    form.value.id = selsetionList[0].id
  } else {
    let condition = selsetionList.every(
        (item: any) => item.clothfiyCode === selsetionList[0].clothfiyCode
    )
    if (!condition) {
      ElMessage.warning('请选择同一个布笼的单据')
      return
    }
    nextTick(() => {
      form.value = {}
      form.value.inShelveId = ''
      form.value.inStorageId = ''
      form.value.outStorageId = selsetionList[0].storageId

      form.value.horseNo = selsetionList[0].horseNo
      form.value.outShelveCode = selsetionList[0].shelveCode
      form.value.areaName = selsetionList[0].areaName
      form.value.outShelveld = selsetionList[0].shelveld
      form.value.storageName = selsetionList[0].storageName
      form.value.outCompanyId = selsetionList[0].companyId
      form.value.inCompanyId = selsetionList[0].companyId
      form.value.outWarehouseId = selsetionList[0].warehouseId
      form.value.inWarehouseId = selsetionList[0].warehouseId
      form.value.outAreaId = selsetionList[0].areaId
      // form.value.inAreaId = ''
      form.value.stockId = selsetionList[0].id
      form.value.outStorageld = selsetionList[0].storageId
      // form.value.inShelveId = selsetionList[0].shelveId
      form.value.outShelveId = selsetionList[0].shelveId


    })
  }
  pageData.pageType = type
  pageData.dialogFormVisible = true
}
const changeCascader2 = (data: any) => {
  const {corporateId, corporateLabel} = data
  query.companyId = corporateId
  focusShelve2()
}
const focusShelve2 = async () => {
  try {
    pageData.loading = true
    let {code, data, message} = await post({
      url: 'dwWms/warehouse/getWarehouseByPara',
      data: {firmId: query.companyId, warehouseTypeName: '毛坯仓'},
    })
    if (code == 200) {
      pageData.inShelveList2 = data
      pageData.loading = false
      return
    }
    ElMessage.error(message)
  } finally {
    pageData.loading = false
  }
}
const configCascader2 = ref<{}>({
  corporateWidth: '200px', //公司宽度
  size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
  corporateName: '公司', //公司label
  cascaderShow: 'sector', //配置部门不显示
})
const save = async () => {
  // console.log(form.value.inShelveId, pageData.inShelveList, form.value.inShelveCode, '原谅我这一生不羁放纵爱自由');
  // let ob = pageData.inShelveList.filter((o: any) => {
  //     if (form.value.inShelveId == o.id) {
  //         return o.shelveCode
  //     }
  //     // console.log(o.inShelveCode, '一生中最爱');
  // })
  // form.value.inShelveCode = ob[0].shelveCode

  try {
    loadingElplus1.value = true
    let {code, message} = await post({
      url:
          pageData.pageType == 'split'
              ? '/dwWms/BlankStock/stockSplit'
              : '/dwWms/BlankStockAdjust/stockAdjust',
      data: pageData.pageType == 'split' ? form.value : [form.value],
    })
    if (code == 200) {
      getList()
      pageData.dialogFormVisible = false
      loadingElplus1.value = false
      ElMessage.success(pageData.pageType == 'split' ? '拆分成功' : '调整成功')
      return
    }
    ElMessage.error(message)
  } finally {
    loadingElplus1.value = false
  }
}
//获取数据
const getList = async () => {
  try {
    // if (activeNme.value == '1') {
    //   var arrpam: any
    //   const { customName, planOrderCode, greyCode, outShelveName, clothfiyCode } = query
    //   arrpam.customName = customName
    //   arrpam.planOrderCode = planOrderCode
    //   arrpam.greyCode = greyCode
    //   arrpam.outShelveName = outShelveName
    //   arrpam.clothfiyCode = clothfiyCode
    //   arrpam.page = 1
    //   arrpam.size = 10
    // }

    loadingElplus.value = true
    let {code, data, message} = await post({
      url:
          activeNme.value == '1'
              ? '/dwWms/BlankStock/getPage'
              : activeNme.value == '2'
                  ? '/dwWms/BlankStock/getPageTotal'
                  : activeNme.value == '4'
                      ? '/dwWms/BlankStockAdjust/getPage'
                      : 'dwWms/dwGreyStockAdjust/getPage',
      data: query,
    })
    if (code && code == 200) {
      pageData.dataList = data.list
      pageData.total = data.total
      //   ElMessage({
      //     type: 'success',
      //     message: '创建成功',
      //   })
      loadingElplus.value = false
      return
    }
    pageData.dataList = []
    ElMessage.error(message)
  } catch {
    pageData.dataList = []
  } finally {
    loadingElplus.value = false
  }
}

//初始化
onMounted(() => {
  getList()
})
</script>
<script lang="ts">
export default defineComponent({
  name: 'Blastclothstorage',
})
</script>
<style scoped>
.contioner {
  height: 100%;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}
</style>
  
